<script lang="ts">
import { h, defineComponent } from "vue";

export default defineComponent({
  props: {
    field: {
      type: Object,
      default: () => ({ scheme: { input: "" } })
    },
    value: {
      type: [Array, Object],
      default: () => []
    }
  },
  setup(props) {
    // 使用一个计算属性动态生成 innerHtml
    const generateInnerHtml = () => {
      let innerHtml = props.field.scheme.input;

      // Helper function to replace placeholders
      function getReplacementValue(index: number, val: any) {
        if (Array.isArray(val)) {
          return `<u>${val[index] || ""}</u>`;
        } else if (typeof val === "object") {
          return `<u>${val[index] || ""}</u>`;
        }
        return "<u></u>";
      }

      let i = 0;
      innerHtml = innerHtml.replace(/\$input/g, () => getReplacementValue(i++, props.value));
      return innerHtml;
    };

    return {
      generateInnerHtml
    };
  },
  render() {
    // 使用 h() 函数返回一个带有 innerHTML 的 div
    return h("div", {
      class: "file-list-wrapper",
      innerHTML: this.generateInnerHtml()
    });
  }
});
</script>

<style lang="scss" scoped>
.file-list-wrapper {
  width: 95%;
}
</style>
